<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="css/style.css">
    <script>
        function enableEdit() {
            document.getElementById('username').disabled = false;
            document.getElementById('email').disabled = false;
            document.getElementById('phone').disabled = false;
            document.getElementById('save-btn').style.display = 'inline-block';
            document.getElementById('edit-btn').style.display = 'none';
        }
    </script>
</head>
<body>
    <div class="profile-container">
        <h1>个人中心</h1>
        <form method="post">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" value="张三" disabled><br>

            <label for="email">电子邮件:</label>
            <input type="email" id="email" name="email" value="zhangsan@example.com" disabled><br>

            <label for="phone">联系电话:</label>
            <input type="tel" id="phone" name="phone" value="123456789" disabled><br>

            <label for="profile-pic">头像:</label>
            <input type="file" id="profile-pic" name="profile-pic"><br>

            <label for="new-password">新密码:</label>
            <input type="password" id="new-password" name="new-password"><br>

            <label for="confirm-password">确认密码:</label>
            <input type="password" id="confirm-password" name="confirm-password"><br>

            <button type="button" id="edit-btn" onclick="enableEdit();">编辑</button>
            <button type="submit" id="save-btn" style="display:none;">保存</button>
        </form>
    </div>
</body>
</html>
